<template>
  <div class="container">
    <mt-header title="孕妈准确消息">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>

    <div class="menstruation_start">
      <label for="">
        请选择您的预产期:
        <input type="text" placeholder="2018-04-03" v-model="dateTime" @click="openPicker">
        <img src="../../images/icon_01.png" alt="">
        <mt-datetime-picker type="date" ref="picker" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
          @confirm="handleConfirm" :startDate="startDate">
        </mt-datetime-picker>

      </label>
    </div>
    <div class="text">
      <span>如何计算预产期:</span>
      <p>怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期</p>
      <p>怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期怎么计算预产期</p>
    </div>
    <div class="next">
      <button>下一步</button>
    </div>
  </div>
</template>
<script>
  //导入时间格式化插件
  import moment from 'moment'
  export default {
    data() {
      return {
        dateTime: "2018-09-03",
        startDate: new Date()
      };
    },
    methods: {
      openPicker() {
        this.$refs.picker.open();
      },
      handleConfirm(data) {
        let date = moment(data).format("YYYY.MM.DD");
        this.dateTime = date;
      }
    }
  };
</script>
<style scoped>
  .mint-header {
    background: #7fffaa;
    font-size: 20px;
    height: 50px;
    border-bottom: 1px solid #fff;
    color: #00000075;
  }

  .menstruation_start label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 10px;
    font-size: 14px;
  }

  .menstruation_start label input {
    width: 45%;
    height: 30px;
    margin-bottom: 0;
    text-align: center;
  }

  .menstruation_start label img {
    width: 25px;
    height: 25px;
  }

  .menstruation_start {
    background-color: #fff;
    height: 60px;
    line-height: 60px;
  }

  .text {
    margin-top: 80px;
    padding: 0 20px;
  }

  .text span {
    color: red;
    margin-bottom: 10px;
    display: block;
  }

  .text p {
    text-indent: 20px;
  }

  .next {
    margin-top: 100px;
    padding: 0 20px;
  }

  .next button {
    width: 100%;
    height: 50px;
    color: pink;
  }
</style>